<template>
  <div>
    <p>text from store:{{text}}</p>
    <p>TEXT FROM STORE:{{textUpper}}</p>
    <input type="text" @input="changeText" :value="text" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { namespace } from "vuex-class";
const FooModule = namespace("Foo");

@Component
export default class Store extends Vue {
  @FooModule.State
  private text!: string;
  @FooModule.Getter
  private textUpper!: string;
  @FooModule.Mutation
  private setText!: (newText: string) => void;
  changeText(e: any): void {
    this.setText(e.target.value);
  }
}
</script>

<style>
</style>